#{extends 'admin.html' /}

#{ifnot post?.id}
    <h3>Write <span>a new post</span></h3>
#{/ifnot}
#{else}
    <h3>Edit <span>${post?.title}</span></h3>
#{/else}
 
#{form @save(post?.id), enctype:'multipart/form-data'}
 
    #{ifErrors}
        <div class="error">
            Please correct these errors.
        </div>
    #{/ifErrors}
     
    <div class="item">
        #{field 'title'}
        <label>Post title:</label>
        <input type="text" name="${field.name}" 
            value="${post?.title}" class="${field.errorClass}" />
        #{/field}
    </div>
 
    <div class="item">
        #{field 'content'}
        <label>Write here:</label>
        <textarea name="${field.name}" 
            class="${field.errorClass}">${post?.content}</textarea>
        #{/field}
    </div>

	<div id="images" style="margin-top: 10px;" class="item">
		<label>Images:</label>
		<div id="listOfAllImages">
			#{if post != null }
				#{list items:post.images, as:'image'}
					<div id="image_${image.id}" class="thumbnail">
						<div>
							<img src='${image.getUrl("/crop/96")}' width="96px" height="96px"/>
						</div>
						<input type="hidden" name="imageId" value="${image.id}" />
						<input type="text" name="title_${image.id}" value="${image.title}" />
						<input type="checkbox" name="isTheMainImage_${image.id}" value="${image.isTheMainImage}" #{if image.isTheMainImage == true } checked="checked" #{/if} class="checkboxToUpdateIsTheMainImageValue"/>
					</div>
				#{/list}
			#{/if}
		</div>
		<div style="clear:both"></div>
		<div id="file-uploader-demo1"></div>
		<script>        
	        function createUploader() {            
	            var uploader = new qq.FileUploader({
	                element: document.getElementById('file-uploader-demo1'),
	                action: '@{ajaxUploadImage()}',
	                debug: true,
	                showMessage: function() {},
	                allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
	                debug: true,
	                onComplete: function(id, fileName, responseJSON) {
	                	var $listOfAllImages = $("#listOfAllImages"); 
	                	var imageId =  responseJSON.imageId;
	                	$listOfAllImages.append("<div id='image_" + imageId + "' class='thumbnail'></div>");
	                	var $image = $("#image_" + imageId, $listOfAllImages);
	                	$image.append("<div><img src='" + responseJSON.imageUrl + "'  width='96px' height='96px'/></div>");
	                	$image.append("<input type='hidden' name='imageId' value='" + imageId + "'/>");
	                	$image.append("<input type='text' name='title_"+ imageId +"' value='" + responseJSON.imageTitle + "' />");
	                	var isTheMainImage = responseJSON.imageIsTheMainImage;
	                	// Is this the first image ?
	                	console.log($("#listOfAllImages .thumbnail").length);
	                	if ($("#listOfAllImages .thumbnail").length == 1) {
	                		isTheMainImage = true;
	                	}
	                	$image.append("<input id='' type='checkbox' class='checkboxToUpdateIsTheMainImageValue' name='isTheMainImage_"+imageId+"' value='"+isTheMainImage+"' />");
	                	if (isTheMainImage) {
	                		jQuery(".checkboxToUpdateIsTheMainImageValue", $image).attr("checked", "checked");
	                	}
	                	jQuery(".checkboxToUpdateIsTheMainImageValue", $image).change(function() {
	                		updateIsTheMainImageValue($(this));
	                	});
	                }
	            });           
	        }
	        
	        $(document).ready(function(){
	        	// in your app create uploader as soon as the DOM is ready
	            // don't wait for the window to load  
	            window.onload = createUploader; 
	        	jQuery(".checkboxToUpdateIsTheMainImageValue").change(function() {
	        		updateIsTheMainImageValue($(this));
	        	});
	        });
	        
	        function updateIsTheMainImageValue(element) {
	        	jQuery(".checkboxToUpdateIsTheMainImageValue").attr('checked', false).val("false");
	        	jQuery(element).attr('checked', true).val("true");
	        }
	    </script>
	</div>
	
    <div class="item" >
        <input type="submit" class="button green" value="Publish this post to the blog" />
        <a href="" class="button red">Delete this post</a>
    </div>
       
#{/form}

    